<template>
  <div class="category">
    <header>
      <input type="text" v-model="txt" placeholder="HUAWEI Mate 50" />

      <icon class="icon" name="chat-o" />
    </header>
    <div class="main">
      <sidebar v-model="active">
        <sidebar-item
          :title="item.name"
          :key="item.id"
          v-for="item in categories"
          :to="{ name: 'Category', query: { c_id: item.id } }"
        />
      </sidebar>
      <List
        class="products"
        finished-text="没有更多了"
        :finished="finished"
        :loading="loading"
        @load="load"
      >
        <div class="indexSwipe">
          <swipe class="my-swipe" :autoplay="3000" indicator-color="#bbb">
            <swipe-item
              ><img src="../assets/image/swipe/swipe1.jpg" alt="" @click="toDetail(63)"
            /></swipe-item>
            <swipe-item
              ><img src="../assets/image/swipe/swipe2.jpg" alt="" @click="toDetail(79)"
            /></swipe-item>
            <swipe-item
              ><img src="../assets/image/swipe/swipe3.jpg" alt="" @click="toDetail(69)"
            /></swipe-item>
            <swipe-item
              ><img src="../assets/image/swipe/swipe4.jpg" alt="" @click="toDetail(68)"
            /></swipe-item>
          </swipe>
        </div>
        <card
          style="background-color: white; border-radius: 12px"
          v-for="item in productsAll"
          :num="item.amount"
          :price="item.price.toFixed(2)"
          :key="item.id"
          :title="item.name"
          :thumb="dalImg(item.coverImage)"
          @click="toDetail(item.id)"
        />
      </List>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { Icon, Sidebar, Swipe, SwipeItem, SidebarItem, List, Card } from "vant";
import { dalImg } from "../utils/tools";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import { useProductCategory } from "../hooks/use-product-category";
import { useProduct } from "../hooks/use-product";

const route = useRoute();
const router = useRouter();
//获取分类
const { categories } = useProductCategory();
const { products, loadData, loading, finished } = useProduct();
const categoryId = ref(route.query.c_id);
const txt = ref("");

//设置侧边栏数据切换
const active = computed(() => {
  return categories.value.findIndex((item) => item.id == categoryId.value);
});

//路由地址改变 组件被复用执行
onBeforeRouteUpdate((to, from) => {
  categoryId.value = to.query.c_id;
  // console.log(to.query.c_id);
  loadData(to.query.c_id, true);
});

const load = () => {
  loadData(categoryId.value);
};
const toDetail = (id) => {
  router.push({
    name: "Detail",
    query: {
      id,
    },
  });
};

//搜索
const productsAll = computed(() => {
  return products.value.filter((item) => item.name.includes(txt.value));
});
</script>

<style scoped lang="scss">
header {
  height: 8vh;
  width: 100%;
  padding-left: 18px;
  display: block;
  position: fixed;
  z-index: 99;
  input {
    width: 76vw;
    height: 40px;
    border-radius: 18px;
    border: none;
    margin: 10px 13px 0;
    text-indent: 1.5rem;
    color: #555;
    font-size: 16px;
  }
  .icon {
    display: inline-block;
    font-size: 1.5rem;
    margin-top: 1rem;
  }
}
.main {
  padding-top: 8vh;
  height: 94vh;
  display: flex;
  .products {
    flex: 1;
    overflow: auto;
  }
  .indexSwipe {
    width: 95%;
    height: 14vh;
    margin: 0 auto;
    border-radius: 1rem;
    overflow: hidden;
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      // background-color: #39a9ed;
    }
    .van-swipe-item {
      width: 90vw;
      height: 38.3vw;
      img {
        width: 100%;
        height: auto;
      }
    }
  }
}
</style>
